<template>
  <div class="statistics">
    <el-row :gutter="10">
      <el-col :span="7">
        <div class="statistics-main">
          <div class="statistics-box">
            <div class="statistics-box-title">成交趋势</div>
            <lineEcharts/>
          </div>
          <div class="statistics-box">
            <div class="statistics-box-title">商品分类占比</div>
            <pieEcharts></pieEcharts>
          </div>
          <div class="statistics-box">
            <div class="statistics-box-title">成交用户画像</div>
            <div class="city-progress-title">地区（TOP5）</div>
            <div class="statistics-city-progress">
              <div class="progress-item" v-for="item in cityData" :key="item.id">
                <div class="city-name">{{ item.name }}</div>
                <div class="city-progress">
                  <div class="progress-box">
                    <div class="progress-box-content" :style="'width:'+item.percentage+'%' "></div>
                  </div>
                  <span class="progress-value">{{ item.value }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="statistics-center">
          <div class="statistics-top">
            <h1 class="title">数据分析大屏</h1>
          </div>
          <div class="statistics-sale-box">
            <div class="sale-box">
              <h3 class="sale-title">今日成交金额</h3>
              <el-statistic :value="outputValue"
                            :value-style="{'fontSize': '68px', 'color': '#ffffff', 'fontWeight': 'bold'}">
                <template #prefix>
                  <span style="color: #fff;font-size: 68px; font-weight: bold;">￥</span>
                </template>
              </el-statistic>
            </div>
            <div class="statistics-list">
              <div class="statistics-item">
                <div class="statistics-item-title">成交件数</div>
                <el-statistic :value="outputValue"
                              :value-style="{'fontSize': '22px', 'color': '#ffffff', 'fontWeight': 'bold'}"/>
              </div>
              <div class="statistics-item">
                <div class="statistics-item-title">成交订单</div>
                <el-statistic :value="outputValue"
                              :value-style="{'fontSize': '22px', 'color': '#ffffff', 'fontWeight': 'bold'}"/>
              </div>
              <div class="statistics-item">
                <div class="statistics-item-title">毛利率</div>
                <el-statistic :value="outputValue"
                              :value-style="{'fontSize': '22px', 'color': '#ffffff', 'fontWeight': 'bold'}">
                  <template #suffix>
                    <span style="color: #fff;font-size: 22px; font-weight: bold;">%</span>
                  </template>
                </el-statistic>
              </div>
              <div class="statistics-item">
                <div class="statistics-item-title">商品访问数</div>
                <el-statistic :value="outputValue"
                              :value-style="{'fontSize': '22px', 'color': '#ffffff', 'fontWeight': 'bold'}"/>
              </div>
              <div class="statistics-item">
                <div class="statistics-item-title">点击-成交转化率</div>
                <el-statistic :value="outputValue"
                              :value-style="{'fontSize': '22px', 'color': '#ffffff', 'fontWeight': 'bold'}">
                  <template #suffix>
                    <span style="color: #fff;font-size: 22px; font-weight: bold;">%</span>
                  </template>
                </el-statistic>
              </div>
            </div>

          </div>
          <div class="statistics-box">
            <div class="statistics-box-title">商品销售情况</div>
            <div class="product-main">
              <el-table :data="tableData"
                        height="48vh"
                        fit
                        :header-row-style="{'background-color': 'transparent'}"
                        :header-cell-style="{'background-color': 'transparent'}"
                        style="width: 100%;background-color: transparent;">
                <el-table-column label="商品">
                  <template #default="{row}">
                    <div class="product-info">
                      <img class="product-pic" :src="row.product_pic" alt="">
                      <div class="product-info-right">
                        <div class="product-val">{{row.name}}</div>
                        <div class="product-val">￥{{row.price}}{{row.uom ? '/'+row.uom.name : ''}}</div>
                        <div class="product-val">{{row.brcode}}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="累计成交金额" width="100" align="center">
                  <template #default="{row}">
                    <span class="total-val">￥{{row.total_money}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="累计成交订单数" width="100" align="center">
                  <template #default="{row}">
                    <span class="total-val">{{row.total_qty}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :span="7">
        <div class="statistics-main">
          <div class="statistics-box">
            <div class="statistics-box-title">商家销售排行</div>
            <div class="merchant-th-box">
              <div class="th-item sort-box">排名</div>
              <div class="th-item merchant-name">名称</div>
              <div class="th-item">订单数</div>
              <div class="th-item">销售额</div>
            </div>
            <div class="merchant-list">
              <div class="merchant-items">
                <div class="merchant-item" v-for="(item, index) in combinedRankData" :key="index">
                  <div class="merchant-item-val sort-box">
                    <img v-if="index == 0 || index == 10" class="sort-icon" src="@/assets/images/sort_1.png" alt="">
                    <img v-else-if="index == 1 || index == 11" class="sort-icon" src="@/assets/images/sort_2.png" alt="">
                    <img v-else-if="index == 2 || index == 12" class="sort-icon" src="@/assets/images/sort_3.png" alt="">
                    <span class="sort-val" v-else>{{(index+1) <= 10 ? (index+1) : (index+1)-10}}</span>
                  </div>
                  <div class="merchant-item-val merchant-name">{{item.name}}</div>
                  <div class="merchant-item-val order-qty">{{item.order}}</div>
                  <div class="merchant-item-val sale-total">￥{{item.value}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-box">
            <div class="statistics-box-title">销售渠道占比</div>
            <pie2Echarts/>
          </div>
          <div class="statistics-box"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {useTransition} from '@vueuse/core'
import lineEcharts from "./components/lineEcharts.vue"
import pieEcharts from "./components/pieEcharts.vue"
import pie2Echarts from "./components/pie2Echarts.vue"

const tableData = ref([
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
  {
    product_pic: 'https://image.zkodoo.cc/25/01/24/4cd6082aea1949b99dbaecc5ce42bcde.jpg',
    name: "蒙牛低脂高钙牛奶250ml*24盒 每100ml含125mg钙 健身伴侣（礼盒装）",
    price: "40.00",
    uom: {id: 1, name: "箱"},
    brcode: 'SN2929391111',
    total_qty: 53,
    total_money: 2120.00
  },
]);
const cityData = ref([
  {id: 1, name: "上海", percentage: 11.90, value: 0},
  {id: 2, name: "江苏", percentage: 10.74, value: 0},
  {id: 3, name: "广东", percentage: 9.92, value: 0},
  {id: 4, name: "山东", percentage: 7.77, value: 0},
  {id: 5, name: "浙江", percentage: 6.72, value: 0}
])
const merchantList = ref([
  {name: "商户1", order: 192032, value: "293822"},
  {name: "商户2", order: 123932, value: "274823"},
  {name: "商户3", order: 102893, value: "193382"},
  {name: "商户4", order: 97382, value: "137482"},
  {name: "商户5", order: 68294, value: "98382"},
  {name: "商户6", order: 58392, value: "82628"},
  {name: "商户7", order: 52938, value: "81837"},
  {name: "商户8", order: 52938, value: "81837"},
  {name: "商户9", order: 52938, value: "81837"},
  {name: "商户10", order: 52938, value: "81837"},
]);
const combinedRankData = ref([...merchantList.value, ...merchantList.value]);

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500,
})

onMounted(() => {
  setTimeout(() => {
    source.value = 10000;
    const base_value = cityData.value[0].percentage;
    for (let i = 0; i < cityData.value.length; i++) {
      cityData.value[i].value = cityData.value[i].percentage.toFixed(2);
      cityData.value[i].percentage = (cityData.value[i].percentage / base_value) * 100
    }
  }, 1000)
})

</script>

<style scoped lang="scss">
.statistics {
  min-width: 1600px;
  width: 100vw;
  height: 100vh;
  background-color: rgb(24, 29, 61);
  overflow: hidden;

  .statistics-box-title {
    font-size: 18px;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 10px;
  }

  .city-progress-title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #ffffff;
  }

  .statistics-city-progress {
    .progress-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .city-name {
        color: #ffffff;
        margin-right: 10px;
      }

      .city-progress {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .progress-box {
          height: 10px;
          width: 88%;
          background-color: #f0f0f0;
          border-radius: 5px;
          position: relative;

          .progress-box-content {
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #3b82f6;
            border-radius: 5px;
            transition: all ease 1s;
          }
        }

        .progress-value {
          color: #ffffff;
          font-size: 14px;
        }
      }
    }
  }


  .statistics-main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 15px;

    .statistics-box {
      width: 100%;
      height: 31.5%;
      border-radius: 20px;
      background-color: rgb(36, 44, 89);
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }

  .statistics-center {
    padding: 15px 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .statistics-top {
      width: 100%;
      height: 65px;
      background-image: url("../../assets/dashboard/title_bg.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;

      .title {
        margin: 0;
        padding: 0;
        color: #ffffff;
        font-size: 36px;
        text-align: center;
        line-height: 65px;
        letter-spacing: 15px;
      }
    }

    .statistics-sale-box {
      width: 100%;
      height: 30%;
      background-image: url("../../assets/dashboard/top_bg.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 15px;
      padding: 30px 20px;
      box-sizing: border-box;

      .sale-box {
        text-align: center;

        .sale-title {
          font-size: 20px;
          font-weight: bold;
          color: #fff;
          margin: 0;
          line-height: 20px;
        }
      }

      .statistics-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        .statistics-item {
          width: calc(100% / 5);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .statistics-item-title {
            font-size: 14px;
            font-weight: bold;
            color: #f0f0f0;
          }

          .statistics-item-value {
            font-size: 22px;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }

    }

    .statistics-box {
      width: 100%;
      height: 58%;
      border-radius: 20px;
      background-color: rgb(36, 44, 89);
      padding: 15px;
      box-sizing: border-box;

      .product-main {

        .product-info{
          display: flex;
          align-items: center;

          .product-pic{
            width: 50px;
            height: 50px;
            margin-right: 10px;
          }
          .product-info-right{

            .product-val{
              color: #ffffff;
            }
          }
        }
        .total-val{
          color: #ffffff;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }

  .merchant-th-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(36, 44, 89);
    z-index: 1;


    .th-item{
      width: 20%;
      height: 30px;
      color: #ffffff;
      font-size: 16px;
      font-weight: bold;

      &.sort-box{
        width: 50px;
        text-align: center;
      }
      &.merchant-name{
        flex: 1;
        margin: 0 10px;
      }
    }
  }
  .merchant-list{
    flex: 1;
    overflow: hidden;

    .merchant-items{
      animation: scroll 10s linear infinite;

      .merchant-item{
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .merchant-item-val{
          width: 20%;
          //font-size: 16px;
          color: #ffffff;

          &.sort-box{
            width: 50px;
            text-align: center;

            .sort-icon{
              width: 22px;
              height: 22px;
            }
            .sort-val{
              font-weight: bold;
            }
          }
          &.merchant-name{
            flex: 1;
            margin: 0 10px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
    }
  }
  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%); /* 向上滚动一个完整高度 */
    }
  }
}


:deep(.product-main .el-table--fit .el-table__inner-wrapper:before){
  background-color: #384176 !important;
}
:deep(.product-main .el-table tr){
  background-color: transparent !important;
}
:deep(.product-main .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell){
  background-color: transparent !important;
}
:deep(.product-main .el-table td.el-table__cell){
  border-bottom-color: #384176 !important;
}
:deep(.product-main .el-table th.el-table__cell.is-leaf){
  border-bottom-color: #384176 !important;
}
</style>
